<template>
  <view class="detailContainer">
    <!-- 轮播图 -->
    <swiper class="detailSwiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item class="detailItem" v-for="(image,index) in detail.images" :key="index">
        <image class="itemImg" :src="image" mode=""></image>
      </swiper-item>
    </swiper>
    
    <!-- 商品名称及价格 -->
    <view class="detailMain">
      <view class="mainTitle">{{detail.name}}</view>
      <view class="mainPrice">￥{{detail.price}}</view>
      <text class="mainText">成为认证桌员可享此商品经销价，</text>
      <text class="attestation">立即认证</text>
      <view class="mainCategory">{{detail.class}}</view>
    </view>
    
    <!-- 商品参数 -->
    <view class="detailParameter">
      <view class="parameterTitle">
        <view class="line"></view>
        <view class="parameterText">商品参数</view>
        <view class="line"></view>
      </view>
      
      <view class="parameterMain">
        <text class="mainContent">
          <text class="mainText">品类： </text>
          <text>{{detail.class}}</text>
        </text>
        <text class="mainContent">
          <text class="mainText">品牌： </text>
          <text>{{detail.brand}}</text>
        </text>
        <text class="mainContent">
          <text class="mainText">仓库： </text>
          <text>{{detail.warehouse}}</text>
        </text>
        <text class="mainContent">
          <text class="mainText storage">库存： </text>
          <text>{{detail.storage}}</text>
        </text>
      </view>
    </view>
    
    <!-- 图标 -->
    <view class="detailIcons">
      <view class="iconsItem">
        <i class="iconfont icon-zhengpinbaozheng"></i>
        <view class="iconText">100%正品</view>
      </view>
      <view class="iconsItem">
        <i class="iconfont icon-youhui"></i>
        <view class="iconText">低价保障</view>
      </view>
      <view class="iconsItem">
        <i class="iconfont icon-gonghuoshang"></i>
        <view class="iconText">仓储直供</view>
      </view>
      <view class="iconsItem">
        <i class="iconfont icon-baoyou"></i>
        <view class="iconText">物流保障</view>
      </view>
    </view>
    
    <!-- 商品详情 -->
    <view class="detailContent">
      <view class="contentTitle">商品详情</view>
      <view style="font-size: 26upx; line-height: 60upx; padding: 0 20upx 0; background-color: #fff;" class="contentMain" v-html="detail.content"></view>
    </view>
    
    <!-- 底部导航 -->
    <view class="detailFooter">
    	<image class="service" src="http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/detail-kefu-d10f0489d2.png?imageView&type=webp" mode=""></image>
    	<view class="btn addShopCart" @click="addShopCart">加入购物车</view>
    	<view class="btn buyNow">立即购买</view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
  export default {
    data() {
      return {
        detail:{}
      }
    },
    computed:{
      ...mapState('home',['cartList'])
    },
    methods: {
      // 点击添加购物车
      addShopCart(){
        let obj = this.cartList.find(item => item.name === this.detail.name)
        if(obj){
          obj.count += 1
          obj.isChecked = true
        }else{
          obj = {...this.detail}
          obj.count = 1
          obj.isChecked = true
          this.cartList.push(obj)
        }
        uni.showToast({
         title: '添加成功',
         icon: 'success',
         duration: 2000
        })
        uni.setStorageSync('cartList',this.cartList)
      }
    },
    mounted(){
      this.detail = uni.getStorageSync('detail')
      console.log(this.detail);
    }
  }
</script>

<style lang="stylus">
.detailContainer
  height: 100%
  background-color: #ddd
  .detailSwiper
    height: 750upx
    width: 100%
    .detailItem
      height: 750upx
      .itemImg
        width: 100%
        height: 100%
  .detailMain
    text-align: center
    background-color: #fff
    .mainTitle
      font-size: 30upx
    .mainPrice
      font-size: 30upx
      color: red
      padding-top: 10upx
    .mainText
      font-size: 26upx
      color: #555
    .attestation
      color: red
      font-size: 26upx
    .mainCategory
      font-size: 26upx
      color: #555
      padding-bottom: 30upx
  .detailParameter
    height: 206upx
    width: 100%
    background-color: #fff
    margin-top: 20upx
    .parameterTitle
      width: 100%
      height: 100upx
      display: flex
      margin-left: 100upx
      .line
        width: 100upx
        height: 1px;
        background-color: #ccc;
        margin:50upx 50upx 0 50upx
      .parameterText
        font-size: 32upx
        color: #999
        margin-top: 30upx
    .parameterMain
      width: 720upx
      height: 120upx
      .mainContent
        margin-right: 120upx
        margin-left: 30upx
        .storage
          margin-left: 36upx
        text
          font-size: 26upx
  .detailIcons
    height: 168upx
    width: 100%
    background-color: #fff
    display: flex
    margin-top: 20upx
    .iconsItem
      width: 180upx
      height: 100%
      margin: 20upx 0 0 20upx
      .iconfont
        font-size: 80upx
        padding-top: 20upx
        padding-left: 20upx
      .iconText
        font-size: 26upx
  .detailContent
    height: 100%
    margin-top: 20upx
    .contentTitle
      text-align: center
      font-size: 34upx
      background-color: #fff
      height: 80upx
      line-height: 80upx
      border-bottom: 2upx solid red
  .detailFooter
    position: fixed
    bottom: 0
    left: 0
    height: 100upx
    line-height: 100upx
    border-top: 1upx solid #eee
    display: flex
    background-color: #fff
    .service
      width: 60upx
      height: 60upx
      margin: 20upx 40upx
    .btn
      width: 305upx
      height: 100%
      text-align: center
      font-size: 28upx
      &.buyNow
        color: #fff
        border-left: 1upx solid #eee
        background-color: #DD1A21
      &.addShopCart
        margin-left: 20upx
        background-color: orange
        color: #fff
</style>
